<template>
	<view class="container">
		<view class="logo-box">
			<image src="../../static/wx.png"></image>
		</view>
	</view>
</template>

<script>
	import userApi from '../../api/user'
	
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
			setTimeout(() => {
				this.login()
			}, 1500)
		},
		methods: {
			login() { //登录用户
				uni.showLoading({
					mask: true,
					title: '正在登录'
				})
				userApi.login((res) => {
					this.$store.commit('changeLogin', true)
					uni.switchTab({ //跳转主页面，写死，因为是异步，所以我们在这处理跳转，待值完成，避免渲染 bug
						url: '/pages/Main/Main',
						success() {
							uni.showToast({
								position: 'center',
								title: '登录成功',
								duration: 1500
							})
						}
					})
				}, (res) => {
					this.$store.commit('changeLogin', false)
					uni.switchTab({ //跳转主页面，写死，因为是异步，所以我们在这处理跳转，待值完成，避免渲染 bug
						url: '/pages/Main/Main',
						success() {
							uni.showToast({
								icon: 'error',
								position: 'center',
								title: '登录失败：' + res.statusCode,
								duration: 1500
							})
						}
					})
				})
			}
		}
	}
</script>

<style scoped>
.container {
	width: 100vw;
	height: 100vh;
	display: flex; /* flex 布局 */
	flex-direction: column; /* 垂直排列 */
	align-items: center; /* 垂直居中 */
	justify-content: center; /* 水平居中 */
	text-align: center;  /* 文本输入框居中 */
	background: linear-gradient(to bottom right, #ea92ff, #eb78ff, #db57ff, #c041ff); /* 背景渐变 */
}
.logo-box {
	width: 200rpx;
	height: 200rpx;
	border: 1rpx solid white;
	border-radius: 10%;
	padding: 10rpx;
	background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px); /* 应用高斯模糊 */
	-webkit-backdrop-filter: blur(10px); /* 为兼容性添加前缀 */
	display: flex; /* flex 布局 */
	flex-direction: column; /* 垂直排列 */
	align-items: center; /* 垂直居中 */
	justify-content: center; /* 水平居中 */
	text-align: center;  /* 文本输入框居中 */
}
.logo-box image {
	width: 100%;
	height: 100%;
	border-radius: 10%;
}
</style>
